<template>
  <text
    class="fu-link"
    :class="[
      `fu-link--${type}`,
      {
        'fu-link--underline': underline,
        'fu-link--disabled': disabled
      }
    ]"
    :style="{
      fontSize: size ? `${size}rpx` : '',
      color: color
    }"
    @click="onClick"
  >
    <!-- 前缀图标 -->
    <text 
      v-if="prefixIcon"
      class="fu-link__prefix-icon fu-icon"
      :class="[`icon-${prefixIcon}`]"
    ></text>
    
    <!-- 内容 -->
    <slot></slot>
    
    <!-- 后缀图标 -->
    <text 
      v-if="suffixIcon"
      class="fu-link__suffix-icon fu-icon"
      :class="[`icon-${suffixIcon}`]"
    ></text>
  </text>
</template>

<script>
/**
 * fu-link 链接组件
 * @description 文字超链接组件
 * @property {String} type - 类型，可选值：default/primary/success/warning/danger/info
 * @property {Boolean} underline - 是否显示下划线
 * @property {Boolean} disabled - 是否禁用
 * @property {String} color - 自定义颜色
 * @property {Number} size - 字体大小，单位rpx
 * @property {String} prefixIcon - 前缀图标
 * @property {String} suffixIcon - 后缀图标
 * @property {String} href - 跳转链接
 * @event {Function} click - 点击链接时触发
 */
export default {
  name: 'fu-link',
  props: {
    type: {
      type: String,
      default: 'default',
      validator: value => ['default', 'primary', 'success', 'warning', 'danger', 'info'].includes(value)
    },
    underline: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    color: String,
    size: Number,
    prefixIcon: String,
    suffixIcon: String,
    href: String
  },
  methods: {
    onClick(event) {
      if (this.disabled) return
      
      if (this.href) {
        // #ifdef H5
        window.open(this.href)
        // #endif
        
        // #ifndef H5
        uni.navigateTo({
          url: this.href
        })
        // #endif
      }
      
      this.$emit('click', event)
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-link {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: var(--fu-font-size-base);
  cursor: pointer;
  
  &:active {
    opacity: 0.8;
  }
  
  &--underline {
    text-decoration: underline;
  }
  
  &--disabled {
    cursor: not-allowed;
    opacity: 0.5;
    
    &:active {
      opacity: 0.5;
    }
  }
  
  &__prefix-icon,
  &__suffix-icon {
    font-family: 'fu-icon';
    font-size: inherit;
  }
  
  &__prefix-icon {
    margin-right: 4rpx;
  }
  
  &__suffix-icon {
    margin-left: 4rpx;
  }
  
  // 主题色
  &--default {
    color: var(--fu-text-color);
  }
  
  &--primary {
    color: var(--fu-primary-color);
  }
  
  &--success {
    color: var(--fu-success-color);
  }
  
  &--warning {
    color: var(--fu-warning-color);
  }
  
  &--danger {
    color: var(--fu-danger-color);
  }
  
  &--info {
    color: var(--fu-info-color);
  }
}
</style> 